<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/visit-details.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <!-- head部分 -->
        <div class="grid grid-cell head">
            <div class="esc"> <a href="./热门景点.html"><img src="./imgs/查看更多@3x.png" alt=""></a></div>
            <div class="head-text">常州中华恐龙园旅游区</div>
            <div class="share"> <a href=""><img src="./imgs/分享-黑.png" alt=""></a></div>
        </div>
        <!-- 轮播图部分 carsousel-->
        <div class="grid grid-cell carousel">
            <!-- carousel -->
            <div class="parts">
                <!-- 单选按钮 -->
                    <input type="radio" class="danxuan" name="r" id="r1" checked>
                    <input type="radio" class="danxuan" name="r" id="r2">
                    <input type="radio" class="danxuan" name="r" id="r3">
                    <input type="radio" class="danxuan" name="r" id="r4">
                    <input type="radio" class="danxuan" name="r" id="r5">
                <div class="picture">
                    <div><img src="./imgs/常州poster.jpg" alt="" class="i1"></div>
                   <div><img src="./imgs/环球港.webp" alt=""></div> 
                    <div><img src="./imgs/青枫公园2.jpg" alt=""></div>
                    <div><img src="./imgs/隔湖.webp" alt=""></div>
                    <div><img src="./imgs/金坛.webp" alt=""></div>
                </div>
                <!-- 控制器 control-->
                <!-- label与单选按钮形成关联映射 -->
                <div class="control">
                    <label for="r1"></label>
                    <label for="r2"></label>
                    <label for="r3"></label>
                    <label for="r4"></label>
                    <label for="r5"></label>
                </div>
            </div>
        </div>

        <!-- 风景区介绍 -->
        <div class="introduce">
            <div class="name">常州中华恐龙园旅游区</div>
            <div class="describe">
                <p>
                    <strong>简介：</strong>
                    <span>常州中华恐龙园旅游区，位于常州市新北区。是一座集科普、游乐、演艺、住宿、购物于一体的一站式旅游度假区，有“东方侏罗纪”之称。</span>
                    <i>阅读全文</i>
                </p>
            </div>
        </div>

        <!-- 开放时间 -->
        <div class="open">
            <img src="./imgs/时间@2x.png" alt="">
            <p>周一至周日 9:00-17:00</p>
        </div>

        <!-- 地址电话 -->
        <div class="w">
            <!-- 分3列 -->
            <div class="addr">
                <p><span class="icon">
                    <img src="./imgs/地址555@2x.png" alt="">
                </span>
                    江苏省常州市新北区河海东路60号
                </p>
                <p>乘坐b22路公交在终点站下</p>
            </div>
            <!-- 图片 -->
            <div class="picture">
                <img src="./imgs/查看更多@2x.png" alt="">
            </div>
            <!-- 电话 -->
            <div class="tel">
                <img src="./imgs/电话111@2x.png" alt="">
            </div>
        </div>
        <!-- 特色活动 -->
        <div class="active">
            <p><strong>特色活动</strong>
            <span>观光</span>
            <span>休闲</span>
            </p>
        </div>
        <!-- 门票 -->
        <div class="ticket">
            <div class="title">
                门票
            </div>
            <div class="price">
                <p class="price-1">
                    <img src="./imgs/门票@2x.png" alt="">
                    <strong>风景区门票</strong>
                    <span>￥50<s>起</s></span>
                </p>
                <p class="price-2">
                    <span>包含除“沙滩浴场”外的景区内所有观光景点</span>
                    <img src="./imgs/小按钮222@2x.png" alt="">
                </p>
            </div>
        </div>
        <!-- 周边推荐 -->
        <div class="recommend">
            <div class="title">周边推荐</div>
            <div class="type">
                <div class="red
                ">美食</div>
                <div>住宿</div>
                <div>特产</div>
            </div>
            <!-- 店铺推荐 -->
            <div class="store">
                <div class="title">
                    <img src="" alt="">
                    <span class="shop-name">店铺名</span>
                </div>

                <div class="show">
                    <img src="" alt="">
                    <p>
                        <span>红烧狮子头</span>
                        <span class="price">
                            <s>人均</s>
                            <b>￥50</b>
                        </span>
                    </p>
                </div>

                <div class="addr">
                    <img src="./imgs/地址555@2x.png" alt="">
                    <strong>
                        盐城市南洋镇新洋七组大洋湾景区外唐渎里美食街
                    </strong>
                </div>
            </div>

            <div class="store">
                <div class="title">
                    <img src="" alt="">
                    <span class="shop-name">店铺名</span>
                </div>
                <div class="show">
                    <img src="" alt="">
                    <p>
                        <span>红烧狮子头</span>
                        <span class="price">
                            <s>人均</s>
                            <b>￥50</b>
                        </span>
                    </p>
                </div>
                <div class="addr">
                    <img src="./imgs/地址555@2x.png" alt="">
                    <strong>
                        盐城市南洋镇新洋七组大洋湾景区外唐渎里美食街
                    </strong>
                </div>
            </div>

        </div>
    </div>
</body>
</html>